// import './index.css'
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Checkbox,
  Radio,
  Select,
  DatePicker,
  Space,
  Table,
  Tag,
} from 'antd'
import { Link } from 'react-router-dom'
import { Component, createRef } from 'react'
import { http } from '../../utils/'
import error from '../../assets/images/error.png'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
const { RangePicker } = DatePicker
const { Option } = Select

const articleState = {
  // key 就是我们拿到的数据，比如，现在拿到的文章状态就是 0 1 2 3
  // value 就是我们需要的数据
  0: { color: 'gold', text: '草稿' },
  1: { color: 'lime', text: '待审核' },
  2: { color: 'green', text: '审核通过' },
  3: { color: 'red', text: '审核失败' },
}

class ArticleList extends Component {
  state = {
    Channelist: [],
    article: {},
  }

  columns = [
    {
      title: '封面',
      dataIndex: 'cover',

      render: data => {
        return <img src={data.images[0] || error} alt="" width={200} height={150} />
        // console.log('data', data)
        // const { type, images } = data
        // if (type === 0) {
        //   // 没有图片
        //   return <img src={defaultImage} alt="" width={200} height={150} />
        // }
        // // 可能有1张，也可能有3张
        // // 不管哪种情况，只展示第一张图片
        // return <img src={images[0]} alt="" width={200} height={150} />
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: status => {
        // 2 推荐：使用 对象 的形式，通过 对象属性的访问 来代替 if/switch 条件判断
        const curData = articleState[status]
        // 注意：不能使用 点语法 来访问
        // const curData = articleState.status
        return <Tag color={curData.color}>{curData.text}</Tag>
      },
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },

    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    {
      title: '操作',

      render: () => {
        return (
          <Space size="large">
            <Button type="primary" shape="circle" icon={<EditOutlined />} />
            <Button type="primary" danger shape="circle" icon={<DeleteOutlined />} />
          </Space>
        )
      },
    },
  ]
  componentDidMount() {
    this.getChanneList()
    this.getArticleList()
  }

  // 获取频道数据
  async getChanneList() {
    const res = await http.get('/channels')
    const { channels } = res.data.data
    this.setState({
      Channelist: channels,
    })
  }
  async getList(params) {
    const res = await http.get('/mp/articles', {
      params,
    })
    this.setState({
      article: res.data.data,
    })
  }
  // 获取文章列表数据
  async getArticleList() {
    // const res = await http.get('/mp/articles')

    // this.setState({
    //   article: res.data.data,
    // })
    this.getList({})
  }
  // 分页
  changePage = async (page, pageSize) => {
    this.getList({...this.queryparams,page, per_page: pageSize })
    // const res = await http.get('/mp/articles', {
    //   params: { page, per_page: pageSize },
    // })
    // this.setState({
    //   article: res.data.data,
    // })
  }
  // 筛选文章
  query = async values => {
    const { status, channel_id, date } = values
    const queryparams = {}
    if (status !== -1) {
      queryparams.status = status
    }
    if (channel_id) {
      queryparams.channel_id = channel_id
    }
    if (date) {
      const begin_pubdate = date[0].startOf('day').format('YYYY-MM-DD HH:mm:ss')
      const end_pubdate = date[1].endOf('day').format('YYYY-MM-DD HH:mm:ss')
      queryparams.begin_pubdate = begin_pubdate
      queryparams.end_pubdate = end_pubdate
    }
    queryparams.page = 1
    this.queryparams = queryparams
    this.getList(queryparams)
    //   this.queryparams=queryparams
    //   console.log(queryparams)
    //   const res = await http.get('/mp/articles', {
    //     params: queryparams,
    //   })
    //   this.setState({
    //     article: res.data.data,
    //   })
  }
  render() {
    const {
      Channelist,
      article: { results, total_count, per_page, page },
    } = this.state

    return (
      <div className="list">
        <Card
          title={
            <Breadcrumb separator=">">
              <Breadcrumb.Item>
                <Link to="/home">首页</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>内容管理</Breadcrumb.Item>
            </Breadcrumb>
          }
        >
          <Form name="basic" initialValues={{ status: -1 }} onFinish={this.query}>
            <Form.Item label="状态" name="status" rules={[]}>
              <Radio.Group>
                <Radio value={-1}>全部</Radio>
                <Radio value={0}>草稿</Radio>
                <Radio value={1}>待审核</Radio>
                <Radio value={2}>审核通过</Radio>
                <Radio value={3}>审核失效</Radio>
                {/* <Radio value={6}>已删除</Radio> */}
              </Radio.Group>
            </Form.Item>

            <Form.Item label="频道" name="channel_id" rules={[]}>
              <Select placeholder="请选择频道列表" style={{ width: 200 }}>
                {Channelist.map(item => (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                ))}

                {/* <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>
        Disabled
      </Option>
      <Option value="Yiminghe">yiminghe</Option> */}
              </Select>
            </Form.Item>

            <Form.Item label="日期" name="date" rules={[]}>
              <RangePicker />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit">
                筛 选
              </Button>
            </Form.Item>
          </Form>
        </Card>
        <Card title={`根据筛选条件共查询到${total_count}条结果`}>
          <Table
            columns={this.columns}
            dataSource={results}
            rowKey="id"
            pagination={{
              position: ['bottomCenter'],
              total: total_count,
              pageSize: per_page,
              current: page,
              onChange: this.changePage,
            }}
          />
        </Card>
      </div>
    )
  }
}

export default ArticleList
